import React, { Component } from 'react'
import { Card } from 'antd';
import ReactEcharts from 'echarts-for-react';  // or var ReactEcharts = require('echarts-for-react');


export default class Bar extends Component {
    state = {
        sales: [10, 52, 200, 334, 390, 330, 220],
        store: [390, 334, 290, 200, 35, 70, 80]
    }
    // echart的数据配置项
    getOption = (sales, store) => {
        return {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                }
            ]
        }
    };
    render() {
        return (
            <Card>
                <ReactEcharts option={this.getOption()} />
                <hr />
                <ReactEcharts option={this.getOption()} />
            </Card>
        )
    }
}
